<template>
    <div class="mb-3 w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
        <div class="flex flex-col items-center py-5 px-4">
            <img class="w-24 h-24 mb-3 rounded-full shadow-lg object-cover" :src="$store.state.setting.avatar" alt="用户头像" />
            <h5 class="mb-1 text-xl font-bold text-gray-900 dark:text-white">
                {{ $store.state.setting.author }}
            </h5>
            <span class="text-sm text-gray-500 dark:text-gray-400 text-center">
                {{ $store.state.setting.introduction || '一枚程序员' }}
            </span>
            <div class="flex mt-4 space-x-3">
                <a v-if="$store.state.setting.githubHome" :href="$store.state.setting.githubHome" target="_blank" 
                   class="text-gray-600 hover:text-blue-600 transition-colors dark:text-gray-400 dark:hover:text-blue-400">
                    <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" clip-rule="evenodd"/>
                    </svg>
                </a>
                <a v-if="$store.state.setting.csdnHome" :href="$store.state.setting.csdnHome" target="_blank"
                   class="text-gray-600 hover:text-red-600 transition-colors dark:text-gray-400 dark:hover:text-red-400">
                    <svg class="w-6 h-6" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                        <path fill="currentColor" d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m17.067-413.525c34.85 4.352 68.778 5.12 102.741 2.1 23.04-2.048 44.817-8.363 64.17-21.914 38.213-26.795 49.784-85.197 24.253-123.051-14.626-21.709-36.813-30.345-60.758-35.499-35.055-7.543-70.45-5.751-105.847-3.413-5.666.358-6.758 3.072-7.236 8.209-3.072 32.683-6.537 65.314-9.813 97.963-2.51 24.815-4.933 49.63-7.51 75.605z m53.402-33.929c1.963-20.907 3.635-39.339 5.427-57.77 1.553-15.907 3.413-31.779 4.727-47.702.359-4.284 1.554-6.656 5.957-6.383 15.616 1.041 31.71.034 46.728 3.652 36.489 8.824 48.726 54.306 23.347 83.03-15.82 17.902-36.761 23.585-59.255 25.087-8.465.546-17.015.085-26.931.085z M512 434.295c-2.185-.648-3.533-1.177-4.932-1.433-37.718-6.878-75.691-8.329-113.647-2.816-20.975 3.038-41.011 9.489-57.48 23.33-22.99 19.32-21.641 46.848 4.402 62.003 13.056 7.595 28.024 12.51 42.599 17.289 14.08 4.608 28.996 6.827 43.144 11.264 12.595 3.925 14.012 14.319 3.584 22.306-3.345 2.56-7.44 5.086-11.537 5.751-11.196 1.827-22.699 4.387-33.826 3.567-24.098-1.775-48.043-5.461-72.55-8.43-1.366 10.615-2.936 23.09-4.557 35.941 4.181 1.366 7.68 2.731 11.264 3.618 33.945 8.5 68.386 9.609 102.912 5.12 20.087-2.61 39.475-7.901 56.695-19.029 28.604-18.483 36.693-57.19 4.676-75.383-14.507-6.383-30.191-10.411-45.483-15.087-11.418-3.482-23.313-5.615-34.526-9.523-9.779-3.413-11.144-12.203-3.038-18.398 4.66-3.55 10.718-6.997 16.384-7.373a480.853 480.853 0 0 1 53.385-.853c15.377.7 30.651 3.55 46.49 5.53L512 434.295z m257.143 2.048L750.933 614.298h54.153c4.779-45.636 9.71-90.726 14.063-135.885.614-6.366 2.355-8.84 8.687-9.011 11.435-.273 22.886-1.98 34.287-1.57 23.722.853 42.394 9.728 38.4 43.264-2.902 24.269-5.598 48.572-8.244 72.875-1.092 10.069-1.826 20.19-2.73 30.413h55.33c3.584-35.26 7.987-70.059 10.496-104.994 3.413-47.463-17.766-73.319-64.683-80.214-40.96-6.007-81.34-.34-121.549 7.134z m-483.498 134.605c-8.739 1.297-16.384 2.799-24.099 3.482-25.651 2.235-51.319 3.942-76.305-4.267-13.909-4.591-24.678-12.578-29.798-25.958-7.902-20.702.887-47.104 19.831-60.314 17.374-12.117 37.718-15.923 58.454-15.923 22.545-.017 45.09 2.423 68.232 3.84L307.2 432.299c-15.07-1.724-29.491-3.925-43.998-4.915-41.011-2.799-80.64 2.61-117.47 20.463-30.02 14.558-52.053 36.01-58.675 68.13-7.851 38.144 11.537 69.495 51.763 85.845 19.149 7.765 39.287 12.51 60.006 12.595 24.747.102 49.494-1.57 74.206-2.952 3.106-.171 8.312-2.902 8.67-5.035 1.98-11.554 2.73-23.279 3.942-35.465z"/>
                    </svg>
                </a>
                <a v-if="$store.state.setting.giteeHome" :href="$store.state.setting.giteeHome" target="_blank"
                   class="text-gray-600 hover:text-red-600 transition-colors dark:text-gray-400 dark:hover:text-red-400">
                    <svg class="w-6 h-6" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                        <path fill="currentColor" d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z"/>
                    </svg>
                </a>
                <a v-if="$store.state.setting.zhihuHome" :href="$store.state.setting.zhihuHome" target="_blank"
                   class="text-gray-600 hover:text-blue-600 transition-colors dark:text-gray-400 dark:hover:text-blue-400">
                    <svg class="w-6 h-6" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                        <path fill="currentColor" d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-90.7 477.8l88.1 155.9h-45.5l-61-111.1-24.8 111.1h-40.1l35.8-159.9-58.4 11 6.8-31.5 58.7-10.4 11.2-54.3-69.3 12 6.5-31.5 68.7-11.7 16.9-75.5h43.2l-15.8 71 82.7-13.8-5.4 30.6-81.9 14.9-11.6 55.9 107.9-19.4-5.8 32-108.4 19.2zm204.4 367.7V599.4l37.3-10.9-37.3-22.6v-43.5h106.6v191.5l50.5-14.9v31.3l-156.8 44.3v-31.3l39.9-9.4z"/>
                    </svg>
                </a>
            </div>
        </div>
        <div class="grid grid-cols-4 gap-2 bg-gray-50 px-3 py-4 border-t border-gray-200 rounded-b-lg dark:bg-gray-700 dark:border-gray-600">
            <div class="flex flex-col items-center">
                <span class="text-xl font-bold text-gray-900 dark:text-white">{{ articleCount }}</span>
                <span class="text-xs text-gray-500 dark:text-gray-400">文章</span>
            </div>
            <div class="flex flex-col items-center">
                <span class="text-xl font-bold text-gray-900 dark:text-white">{{ categoryCount }}</span>
                <span class="text-xs text-gray-500 dark:text-gray-400">分类</span>
            </div>
            <div class="flex flex-col items-center">
                <span class="text-xl font-bold text-gray-900 dark:text-white">{{ tagCount }}</span>
                <span class="text-xs text-gray-500 dark:text-gray-400">标签</span>
            </div>
            <div class="flex flex-col items-center">
                <span class="text-xl font-bold text-gray-900 dark:text-white">{{ visitCount }}</span>
                <span class="text-xs text-gray-500 dark:text-gray-400">访问</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useStore } from 'vuex'
import { onMounted, ref, reactive } from 'vue'
import { getIndexArticleList } from '@/api/frontend/index'
import { getCategoryList } from '@/api/frontend/index'
import { getTagList } from '@/api/frontend/index'

// 统计数据
const articleCount = ref(0)
const categoryCount = ref(0)
const tagCount = ref(0)
const visitCount = ref(0)

// 真实数据目标值
const targetValues = reactive({
    article: 0,
    category: 0,
    tag: 0,
    visit: 1314
})

// 数字动画效果
const animateValue = (obj, start, end, duration) => {
    let startTimestamp = null;
    const step = (timestamp) => {
        if (!startTimestamp) startTimestamp = timestamp;
        const progress = Math.min((timestamp - startTimestamp) / duration, 1);
        obj.value = Math.floor(progress * (end - start) + start);
        if (progress < 1) {
            window.requestAnimationFrame(step);
        }
    };
    window.requestAnimationFrame(step);
}

// 获取真实统计数据
const getStatistics = async () => {
    try {
        // 获取文章列表用于统计文章数
        const articleRes = await getIndexArticleList({
            current: 1,
            size: 1
        })
        if (articleRes.success) {
            targetValues.article = articleRes.data.total || 11
            animateValue(articleCount, 0, targetValues.article, 1000)
        }
        
        // 获取分类列表用于统计分类数
        const categoryRes = await getCategoryList({})
        if (categoryRes.success) {
            targetValues.category = categoryRes.data.length || 6
            animateValue(categoryCount, 0, targetValues.category, 1000)
        }
        
        // 获取标签列表用于统计标签数
        const tagRes = await getTagList({})
        if (tagRes.success) {
            targetValues.tag = tagRes.data.length || 12
            animateValue(tagCount, 0, targetValues.tag, 1000)
        }

        // 访问量动画，每次访问首页+1
        const currentVisit = localStorage.getItem('visitCount') ? parseInt(localStorage.getItem('visitCount')) : targetValues.visit
        const newVisit = currentVisit + 1
        localStorage.setItem('visitCount', newVisit.toString())
        animateValue(visitCount, 0, newVisit, 1500)
    } catch (error) {
        console.error('获取统计数据失败:', error)
        // 出错时显示默认值
        animateValue(articleCount, 0, 11, 1000)
        animateValue(categoryCount, 0, 6, 1000)
        animateValue(tagCount, 0, 12, 1000)
        const currentVisit = localStorage.getItem('visitCount') ? parseInt(localStorage.getItem('visitCount')) : 1314
        animateValue(visitCount, 0, currentVisit, 1500)
    }
}

onMounted(() => {
    getStatistics();
})

const store = useStore()
</script>